<!--  线 + 柱混合图 -->
<template>
  <div ref="echartRef" :class="className" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref, markRaw, watch, reactive } from "vue";
const echartRef = ref<HTMLElement | null>(null);

const props = defineProps({
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "100%",
    required: true,
  },
  datas: {
    type: Object,
    default: () => {
      return {
        name: "",
        unit: "",
        xData: [],
        yData: [],
      };
    },
    required: true,
  },
});

function getOption() {
  return reactive({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    grid: {
      left: 10,
      right: 15,
      bottom: 0,
      top: 35,
      containLabel: true,
    },
    legend: {
      x: "right",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: props.datas.xData,
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#D0DEEE",
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15,
          formatter: function (value) {
            let res = ""; // 拼接加\n返回的类目项
            let maxLength = 6; // 每项显示文字个数  数字设置几，就一行显示几个文字
            let valLength = value.length; // X轴上的文字个数
            let rowN = Math.ceil(valLength / maxLength); // 需要换行的行数
            // 换行的行数大于1,
            if (rowN > 1) {
              for (let i = 0; i < rowN; i++) {
                let temp = ""; //每次截取的字符串
                let start = i * maxLength; //开始截取的位置
                let end = start + maxLength; //结束截取的位置
                temp = value.substring(start, end) + "\n";
                res += temp; //拼接字符串
              }
              return res;
            } else {
              return value;
            }
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#6C8097",
          },
        },
      },
    ],
    yAxis: [
      {
        name: props.datas.unit ? props.datas.unit : "吨",
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#DCE2E8",
          },
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#D0DEEE",
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(108, 128, 151, 1)",
          },
        },
      },
    ],
    series: [
      {
        name: props.datas.name ? props.datas.name : "节水量",
        type: "line",
        smooth: false,
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: props.datas.yData,
        lineStyle: {
          color: "#26A3F0",
        },
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#26A3F0" },
          { offset: 1, color: "rgba(0, 89, 84, 0)" },
        ]),
      },
    ],
  });
}
let chart = ref<any>("");
onMounted(() => {
  // 图表初始化
  chart.value = markRaw(echarts.init(echartRef.value));

  chart.value.setOption(getOption());

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});
watch(
  props,
  (data) => {
    chart.value.setOption(getOption());
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;

  .download {
    cursor: pointer;

    &:hover {
      color: #409eff;
    }
  }
}
</style>
